<template>
  <div class="userInfo">
    <!-- 页面标题 -->
    <hm-nav-bar title="我的资料" path="/home/my"></hm-nav-bar>
    <!-- 我的资料页选项 -->
    <div class="main">
      <!-- 个人资料 -->
      <div class="van-cell-group">
        <van-cell-group>
          <!-- 头像 -->
          <van-cell
            :border="false"
            class=" my-cell"
            title="头像"
            @click="showPopup"
          >
            <template #right-icon>
              <i class="iconfont icon-tubiao-"></i>
            </template>
            <template>
              <img src="./avatar.jpg" alt="" />
            </template>
          </van-cell>

          <!-- 昵称 -->
          <van-cell
            :border="false"
            class=" my-cell"
            title="昵称"
            :value="userInfo && userInfo.name"
            @click="edit"
          >
            <template #right-icon>
              <i class="iconfont icon-tubiao-"></i>
            </template>
          </van-cell>

          <!-- 性别 -->
          <van-cell
            :border="false"
            class=" my-cell"
            title="性别"
            :value="userInfo && columns[userInfo.gender]"
            @click="showToolbar"
          >
            <template #right-icon>
              <i class="iconfont icon-tubiao-"></i>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <!-- 其他资料 -->
      <div class="intro">
        <van-cell :border="false" title="介绍" class="my-cell">
          <template #right-icon>
            <i class="iconfont icon-tubiao-"></i>
          </template>
        </van-cell>
      </div>
    </div>

    <!-- 设置 -->
    <!-- 头像设置 -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '30%' }"
      round
      class="set"
    >
      <van-cell-group>
        <van-cell class="option" title="拍一张" />
        <van-cell class="option" title="从相册中选择" />
        <van-cell
          class="option"
          @click="close"
          title="取消"
          style="color:red"
        />
      </van-cell-group>
    </van-popup>
    <!-- 性别设置 -->
    <van-popup v-model="toolbar" position="bottom">
      <van-picker
        show-toolbar
        title="设置性别"
        :columns="columns"
        :default-index="userInfo.gender"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>
<script>
import { getUserId, getUserProfile } from '@/api/my.js'

export default {
  name: 'editInfo',
  components: {},
  data () {
    return {
      // userInfo
      userInfo: '',
      show: false,
      // 传递用户id
      target: this.$route.params.target,
      // 设置性别
      toolbar: false,
      columns: ['男', '女', '未知']
    }
  },
  created () {
    this.getUserProfile()
    this.getUserId()
  },
  methods: {
    getUserId () {
      getUserId().then(res => {
        console.log(res)
      })
    },
    getUserProfile () {
      getUserProfile().then(res => {
        console.log(res)
        this.userInfo = res.data
      })
    },
    // 设置头像
    showPopup () {
      this.show = true
    },
    close () {
      this.show = false
    },
    edit () {
      this.$router.push('/home/edit/' + this.userInfo.id)
    },
    // 设置性别
    showToolbar () {
      this.toolbar = true
    },
    onConfirm () {
      this.$toast.success('修改成功')
      this.toolbar = false
    },
    onCancel () {
      this.toolbar = false
    }
  }
}
</script>
<style lang="less" scoped>
.userInfo {
  .main {
    height: 100vh;
    padding: 50px 20px 0;
    background-color: #f9f9f9;
    .van-cell-group {
      border-radius: 20px;
      .my-cell {
        font-size: 16px;
        padding: 20px;
        align-items: center;
        border-radius: 10px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .iconfont:last-child {
          font-size: 18px;
          margin-left: 5px;
          color: #5b5d75;
        }
      }
    }
    .intro {
      margin-top: 10px;
      .my-cell {
        padding: 20px;
        border-radius: 10px;
      }
    }
  }
  .set {
    .option {
      width: 100%;
      font-size: 16px;
      text-align: center;
      padding: 20px;
      margin-top: 2px;
      border-bottom: 1px solid #f9f9f9;
    }
  }
}
</style>
